const path = require('path');
//插件 用于每次清空dist目录
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
//插件 不生成LINCENSE.txt文件
const TerserPlugin = require("terser-webpack-plugin");
//css独立打包
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//网页打包
const HtmlWebpackPlugin = require("html-webpack-plugin");
//webpack-server
const webpack = require("webpack");

var getHtmlConfig = function(name){
    return{
        template : './src/view/'+ name +'.html',
        filename : 'view/' + name + '.html',
        inject   : true, //自动注入 不需要在index.html中<script src="../../dist/js/util.js"></script>
        hash     : true,
        chunks   : ['common', name], //不需要在index.html中<link>或<script> 'common'文件和'name'文件
        minify   : {
            collapseWhitespace : false
        }
    }
}

var config = {
    entry: {
        'common'       : ['./src/page/common/index.js'],
        'index'        : ['./src/page/index/index.js'],
        'login'        : ['./src/page/login/index.js'],
        'catalog-main' : ['./src/page/catalog-main/index.js'],
        'order'        : ['./src/page/order/order.js']
    },
    output: {
        filename: 'js/[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        port : 8888,
        contentBase : path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/, 
                use : [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    },
                    {
                        loader:'css-loader',
                        options:{
                            esModule:false,
                            importLoaders:1
                        }
                    }
                ]
            },
            {
                test: /\.(jpg|png|gif)$/,
                use :[{
                    loader  : 'url-loader',
                    options :{
                        limit   :10,
                        esModule:false,
                        name    :'images/[name].[ext]'
                    }
                }] 
            },
            {
                test: /\.htm$/,
                use : {
                    loader : 'html-loader',
                    options: {
                        esModule : false,
                        minimize : false
                    }
                }
            }
        ]
    },
    plugins: [
        //new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        }),
        new HtmlWebpackPlugin(getHtmlConfig('index')),
        new HtmlWebpackPlugin(getHtmlConfig('catalog-main')),
        new HtmlWebpackPlugin(getHtmlConfig('order')),
        new webpack.HotModuleReplacementPlugin()
    ],
    optimization: {
        minimize: false,//文件没有压缩
        minimizer: [
            new TerserPlugin({
                extractComments : false,//不将注释提取到单独的文件
            }),
        ],
        splitChunks: {
            cacheGroups: {
                commons: {
                    name      : 'util',
                    chunks    : 'all',
                    minChunks : 2,
                    minSize   : 0
                }
            }
        }
    },
    externals: {
        jquery: 'window.jQuery'
    },
    resolve:{
        alias:{
            util        : __dirname + '/src/util',
            page        : __dirname + '/src/page',
            images      : __dirname + '/src/images',
            node_modules: __dirname + '/node_modules'
        }
    }
};

module.exports = config;